<template>
  <Form :model="vFormItem" label-position="right" :label-width="40">
    <FormItem label="删除">
      <Icon type="ios-close-circle" class="remove_icon" @click="removeItem"/>
      <Input type="textarea" v-model="vFormItem.content" placeholder="内容"></Input>
    </FormItem>
  </Form>
</template>

<script>
    import { debounce } from '@/utils/index'
    export default {
      name: 'vItem',
      props: {
        item: {
            type: String
        },
        index: {
            type: Number
        }
      },
      data() {
        return {
          vFormItem: {
            content: ''
          }
        }
      },
      computed: {
        contentCg: function () {
          return this.vFormItem.content
        }
      },
      watch: {
          contentCg(value) {
              debounce(this.emitDebounce, 300)(value)
          },
          item(n, o) {
              this.vFormItem.content = this.item
          }
      },
      methods: {
        emitDebounce: function (value) {
            this.$emit('setUlsData', {key: this.index, value: value})
        },
        removeItem: function () {
            this.$emit('deleUlsItem', {key: this.index})
        }
      },
      created() {
          this.vFormItem.content = this.item
      }
    }
</script>

<style scoped lang="scss">
.remove_icon{
  vertical-align: -2px;
  &:hover{
    color: #ff0a1e;
    cursor: default;
  }
}
</style>
